<template>
	<el-form :model="formData" ref="formRef" :rules="formRules" label-width="8rem">
		<el-row type="flex" :gutter="10">
			<el-col :span="12">
				<el-form-item label="会员昵称" prop="wxName">
					<el-input disabled v-model="formData.wxName"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="订单号" prop="order_sn">
					<el-input disabled v-model="formData.order_sn"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="电话号码" prop="mainPhone">
					<el-input disabled v-model="formData.mainPhone"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="订单总金额" prop="total_money">
					<el-input disabled v-model="formData.total_money"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="运费" prop="freight_money">
					<el-input disabled v-model="formData.freight_money"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="实际支付金额" prop="pay_money">
					<el-input disabled v-model="formData.pay_money"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="下单时间" prop="addtime">
					<el-input disabled v-model="formData.addtime"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="支付时间" prop="pay_time">
					<el-input disabled v-model="formData.pay_time"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="订单状态" prop="status">
					<el-select v-model="formData.status" size="mini" placeholder="请选择订单状态" disabled
						>
						<el-option v-for="item in typelist" :key="item.id" :label="item.label" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="支付状态" prop="pay_status">
					<el-select v-model="formData.pay_status" size="mini" placeholder="请选择订单状态" disabled
						>
						<el-option v-for="item in paylist" :key="item.id" :label="item.label" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="客户收货地址" prop="province">
					<el-input disabled v-model="formData.province+formData.city+formData.town"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="退款金额" prop="refound_money">
					<el-input disabled placeholder="请输入退款金额" v-model="reinfo.refound_money"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="售后原因" prop="reject_reason">
					<el-input disabled placeholder="客户申请售后原因" v-model="reinfo.reject_reason"></el-input>
				</el-form-item>
			</el-col>
			<!-- 1退款退货 2退款不退货 3我要换货 -->
			<el-col :span="12">
				<el-form-item label="售后类型" prop="ref_type">
					<el-select v-model="reinfo.ref_type" size="mini" placeholder="请选择售后类型" disabled
						>
						<el-option v-for="item in relist" :key="item.id" :label="item.label" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="订单类型" prop="delivery_method">
					<el-select v-model="formData.delivery_method" size="mini" placeholder="请选择订单类型" disabled
						>
						<el-option v-for="item in delivery_methodlist" :key="item.id" :label="item.label" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="拒绝原因" prop="reason">
					<el-input  placeholder="拒绝申请售后原因" v-model="formData.reason"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="24">
				<el-form-item label="订单商品">
					<div >
						<div class="goodslist" v-for="(item,index) in formData.goodsList" :key="index">
							<el-image style="width: 80px;height: 80px;margin-right: 10px;" :src="item.url"></el-image>
							<div class="info">
								<div>商品名称:{{item.goods_name}}</div>
								<div>商品价格:{{item.goods_price}}</div>
								<div v-if="item.spec_name">商品规格:{{item.spec_name}}</div>
								<div>商品数量:{{item.goods_num}}</div>
							</div>
						</div>
					</div>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row type="flex" justify="center">
			<el-button type="primary"  @click="onCancel">同意申请</el-button>
			<el-button type="default"  @click="onConfirm">拒绝申请</el-button>
		</el-row>
	</el-form>
</template>

<script>
	import {
		get
	} from "@/assets/js/http.js";
	export default {
		name: "member-sent",
		props: {
			id: {
				type: String,
				default: () => ''
			},
			reinfo:{
				type:Object,
				default:()=>{}
			}
		},
		components: {
			// "el-upload-image": () => import("@/components/el-upload-image.vue"),
		},
		mounted() {
			console.log(this.formData,'formData',this.reinfo)
			this.getinfo(this.id)
			this.getlog()
		},
		data() {
			return {
				loglist:[],
				formRules: {
					// reason: [{
					// 	required: true,
					// 	message: '请输入',
					// 	trigger: 'change'
					// }],
					// ship_id:[{
					// 	required: true,
					// 	message: '请选择',
					// 	trigger: 'change'
					// }],
				},
				relist:[
					{
						id: 1,
						label: '退款退货'
					}, {
						id: 2,
						label: '退款不退货'
					}, {
						id: 3,
						label: '我要换货'
					}
				],//1退款退货 2退款不退货 3我要换货
				formData:{},
				// sentdata:{},
				typelist: [{
					id: 0,
					label: '待付款'
				}, {
					id: 1,
					label: '待发货'
				}, {
					id: 2,
					label: '待收货'
				}, {
					id: 3,
					label: '待评价'
				}, {
					id: 4,
					label: '已取消'
				}, {
					id: 5,
					label: '售后退款中'
				}, {
					id: 6,
					label: '已完成'
				}, {
					id: 7,
					label: '售后完成'
				}], //0待付款 1待发货 2待收货 3待评价 4已取消 5售后退款中 6已完成 7售后完成
				paylist: [{
					id: 0,
					label: '未支付'
				}, {
					id: 1,
					label: '已支付'
				}], // 0未支付 1已支付
				delivery_methodlist:[{
					id: 1,
					label: '快递'
				}, {
					id: 2,
					label: '自提'
				}],//1快递 2自提
			};
		},
		methods: {
			getinfo(){
				get({
					url: '/admin/order.Order/edit',
					params: {
						id: this.id
					}
				}).then(res => {
					// console.log(res.row)
					this.formData = res.row
				})
			},
			getlog(){
				get({
					url:'/admin/basic.Ship/index'
				}).then(res=>{
					this.loglist = res.list
				})
			},
			onConfirm() {
				this.$refs.formRef.validate((valid) => {
					if (valid) {
						// alert('submit!');
						if(!this.formData.reason){
							this.$message('请输入拒绝原因')
							return
						}
						this.formData.ref_id = this.reinfo.ref_id
						console.log(this.formData)
						this.$emit("send", this.formData);
						this.$parent.$emit("update:visible", false);
						this.$refs.formRef.resetFields()
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			onCancel() {
				this.formData.ref_id = this.reinfo.ref_id
				console.log(this.formData,'this.formData')
				this.$emit("agree", this.formData);
				this.$parent.$emit("update:visible", false);
				this.$refs.formRef.resetFields();
			}
		}
	};
</script>

<style lang="scss" scoped>
	.goodslist{
		display: flex;
		align-items: center;
	}
</style>
